<template>
  <div class="addBrand-container">
    <div class="container">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="任务名称" prop="name">
          <el-input style="width: 20%;" placeholder="请输入任务名称" v-model="form.taskName"></el-input>
        </el-form-item>
        <el-form-item label="所属项目">
          <el-select v-model="value" placeholder="请选择所属项目">
            <el-option
              v-for="item in projects"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="form.endTime"
            size="mini"
            type="datetime"
            placeholder="选择预计结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <div class="subBox">
          <el-button type="primary" @click="submitForm('form',false)">保存</el-button>
          <el-button
            v-if="this.optType === 'add'"
            type="primary"
            @click="submitForm('form',true)"
          >保存并继续添加任务</el-button>
          <el-button @click="() => this.$router.push('/layout/project')">返回</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  selectTaskById,
  updateTaskById,
  addTask,
  selectTaskOfProject
} from "@/api/task";
import Cookies from "js-cookie";
export default {
  name: "AddTask",

  data() {
    return {
      optType: "", //当前操作的类型，新增或者修改
      token: Cookies.get("token"),
      form: {
        taskName: "",
        projectId: "",
        endTime: ""
      },
      projects: [],
      value:"",
    };
  },

  mounted() {},
  created() {
    //获取路由参数（id），如果有则为修改操作，否则为新增操作
    this.optType = this.$route.query.id ? "update" : "add";
    if (this.optType === "update") {
      //修改操作
      selectTaskById(this.$route.query.id).then(res => {
        if (res.data.code === 200) {
          console.log("修改任务", res.data);
          this.form = res.data.data;
        }
      });
    }
    // 查询任务所属的项目，在页面回显
    selectTaskOfProject().then(res => {
      if (res.data.code === 200) {
        console.log("查询任务所属的项目", res.data);
        this.projects = res.data.data;
      }
    });
  },
  methods: {
    submitForm(formName, isContinue) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //表单校验通过，发起Ajax请求，将数据提交到后端
          if (this.optType === "add") {
            //新增操作
            const params = {taskName:this.form.taskName,projectId:this.value,endTime:this.form.endTime}
            addTask(params).then(res => {
              if (res.data.code === 200) {
                this.$message.success("任务添加成功！");
                if (isContinue) {
                  this.form = {
                    taskName: "",
                    projectId: "",
                    endTime: ""
                  };
                } else {
                  this.$router.push("/layout/task");
                }
              } else {
                this.$message.error(res.data.msg);
              }
            });
          } else {
            //修改操作
            this.form.projectId = this.value;
            updateTaskById(this.form).then(res => {
              if (res.data.code === 200) {
                this.$message.success("任务修改成功！");
                this.$router.push("/layout/task");
              }
            });
          }
        }
      });
    }
  }
};
</script>


<style lang="less" scoped>
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.addBrand {
  &-container {
    margin: 30px;
    margin-top: 30px;
    .HeadLable {
      background-color: transparent;
      margin-bottom: 0px;
      padding-left: 0px;
    }
    .container {
      position: relative;
      z-index: 1;
      background: #fff;
      padding: 30px;
      border-radius: 4px;
      // min-height: 500px;
      .subBox {
        padding-top: 30px;
        text-align: center;
        border-top: solid 1px #c3c8ce;
      }
    }
    .idNumber {
      margin-bottom: 39px;
    }

    .el-form-item {
      margin-bottom: 29px;
    }
    .el-input {
      width: 293px;
    }
  }
}
</style>